<template>
  <div class="wrap-1 flex flex-col">
      <div class="count-item flex items-center">
          <van-field v-model="sloanMoney" label="商业贷款金额" input-align="right" placeholder="" />
          <span style="width:10vw;" class="mr-2">万元</span>
      </div>
      <!-- 商业贷款年限 -->
        <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="商业贷款年限"
                input-align="right"
                :value="sloanYear"
                @click="showPicker1 = true"
                />
                <van-popup v-model="showPicker1" round position="bottom">
                <van-picker
                    show-toolbar
                    :columns="loanYearsList"
                    :default-index="29"
                    @cancel="showPicker1 = false"
                    @confirm="onConfirm1"
                />
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
        <!-- 公积金贷款 -->
        <div class="count-item flex items-center">
          <van-field v-model="gloanMoney" label="公积金贷款金额" input-align="right" placeholder="" />
          <span style="width:10vw;" class="mr-2">万元</span>
      </div>
      <!-- 公积金贷款年限 -->
        <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="公积金贷款年限"
                input-align="right"
                :value="gloanYear"
                @click="showPicker1 = true"
                />
                <van-popup v-model="showPicker1" round position="bottom">
                <van-picker
                    show-toolbar
                    :columns="loanYearsList"
                    :default-index="29"
                    @cancel="showPicker1 = false"
                    @confirm="onConfirm1"
                />
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
        <!-- 商贷利率 -->
         <!-- 利率方式 -->
        <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="商贷利率"
                input-align="right"
                :value="`${sfinalRate}%`"
                @click="showPicker3 = true; if(szdyRate){scurrRateIndex = 99}"
                />
                <van-popup v-model="showPicker3" :style="{ height: '100%' }" :overlay="isoverlay" position="bottom">
                    <div class="custom-area flex items-center">
                        <span class="zdy">自定义利率:</span>
                        <input type="number" class="ipt-text" v-model="szdyRate" placeholder="请输入利率" /> 
                        <span class="gray-8">%</span>
                        <div class="btn" @click="sokRate">确定</div>
                    </div>
                    <div class="choose-rate">
                        <div class="tips">或者选择常用利率</div>
                        <ul>
                            <li
                            class="rate-item"
                            v-for="(item, index) in srateList"
                            :key="index"
                            @click="schooseRate(index)"
                            :class="{'on': index == scurrRateIndex}"
                            >
                                {{item.desc}}{{index == 0 || index == 1?'': item.name}}
                            </li>
                        </ul>
                    </div>
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
          <!-- 公积金利率 -->
        <div class="count-item flex items-center">
             <van-field
                readonly
                clickable
                label="公积金利率"
                input-align="right"
                :value="`${gfinalRate}%`"
                @click="showPicker4 = true; if(gzdyRate){gcurrRateIndex = 99}"
                />
                <van-popup v-model="showPicker4" :style="{ height: '100%' }" :overlay="isoverlay" position="bottom">
                    <div class="custom-area flex items-center">
                        <span class="zdy">自定义利率:</span>
                        <input type="number" class="ipt-text" v-model="gzdyRate" placeholder="请输入利率" /> 
                        <span class="gray-8">%</span>
                        <div class="btn" @click="gokRate">确定</div>
                    </div>
                    <div class="choose-rate">
                        <div class="tips">或者选择常用利率</div>
                        <ul>
                            <li
                            class="rate-item"
                            v-for="(item, index) in grateList"
                            :key="index"
                            @click="gchooseRate(index)"
                            :class="{'on': index == gcurrRateIndex}"
                            >
                                {{item.desc}}{{index == 0 || index == 1?'': item.name}}
                            </li>
                        </ul>
                    </div>
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
        <div class="count-item btn" @click="caculateLoan">开始计算</div>
        <div class="bottom-tips">create by wangerge</div>
        <van-popup v-model="showResult" :style="{height: '100%'}" :overlay="false" closeable >
            <count-result
                v-if="showResult"
                type="zuhe"
                :totalPrice="totalPrice"
                :sloanMoney="sloanMoney"
                :gloanMoney="gloanMoney"
                :syears="syears"
                :gyears="gyears"
                :sfinalRate="sfinalRate"
                :gfinalRate="gfinalRate"
                id="result"/>
        </van-popup>
  </div>
</template>
<script>
import countResult from './countResult'
import { Toast } from 'vant';

export default {
     components:{
        countResult
    },
    data(){
        return{
            totalPrice: "100",
            sloanMoney: "60",
            gloanMoney: "10",
            isLPR: true,
            countList:[
                 {
                    name: "计算方式",
                    value: "按贷款总额"
                }, {
                    name: "商贷金额",
                    value: ""
                }, {
                    name: "商贷年限",
                    value: ""
                }, {
                    name: "利率方式",
                    value: ""
                }, {
                    name: "LPR",
                    value: ""
                }, {
                    name: "基点",
                    value: ""
                }, {
                    name: "商贷利率",
                    value: ""
                },
            ],
            i: 0,
            value: '',
            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            showPicker3: false,
            showPicker4: false,
            columns: ['按贷款总额','按贷款总额','按贷款总额','按贷款总额','按贷款总额'],
            loanYearsList: [],
            sloanYear: "30年(360期)",
            gloanYear: "30年(360期)",
            syears: 30,
            gyears: 30,
            defaultRate: '基准利率',
            rateList: ["基准利率","7折","85折","1.05倍" ,"1.1倍"],
            basicPoint: [],
            showResult: false,
            sfinalRate: 4.9,
            gfinalRate: 3.25,
            scurrRateIndex: 0,
            gcurrRateIndex: 0,
            isoverlay: false,
            szdyRate: '',
            gzdyRate: '',
            srateList: [
                {
                    name: "最新报价利率(LPR)",
                    desc: '',
                    key: 4.65
                },
                 {
                    name: "基准利率",
                    desc: '',
                    key: 4.9                   
                },
                 {
                    name: "7折",
                    desc: '基准利率下限',
                    key: 3.43
                },
                 {
                    name: "85折",
                    desc: '基准利率下限',
                    key: 4.165
                },
                 {
                    name: "1.05倍",
                    desc: '基准利率上限',
                    key: 5.145
                },
                 {
                    name: "1.1倍",
                    desc: '基准利率上限',
                    key: 5.39
                }
            ],
             grateList: [
                {
                    name: "最新报价利率(LPR)",
                    desc: '',
                    key: 3.25
                },
                 {
                    name: "基准利率",
                    desc: '',
                    key: 3.25              
                },
                 {
                    name: "7折",
                    desc: '基准利率下限',
                    key: 2.28
                },
                 {
                    name: "85折",
                    desc: '基准利率下限',
                    key: 2.76
                },
                 {
                    name: "1.05倍",
                    desc: '基准利率上限',
                    key: 3.41
                },
                 {
                    name: "1.1倍",
                    desc: '基准利率上限',
                    key: 3.57
                }
            ],
        }
    },
    mounted() {
        for (let i = 1; i < 31; i++) {
        this.loanYearsList.push(i + "年" + "(" + i * 12 + "期)");
        }
    },
    created(){
    },
    computed:{
        
    },
    methods: {
        tips(){
            Toast('没有');
        },
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;

    },
     onConfirm1(value, index) {
         console.log(value)
            this.sloanYear = value;
            this.syears = index + 1;
            console.log(this.syears)
            this.showPicker1 = false;

    },
     onConfirm2(value, index) {
         console.log(value)
            this.gloanYear = value;
            this.gyears = index + 1;
            console.log(this.gyears)
            this.showPicker2 = false;
    },
    // 利率
     onConfirm3(value) {
         console.log(value)
            this.showPicker3 = false;
    },
    onConfirm4(value) {
         console.log(value)
            this.showPicker4 = false;
    },
    // s 选择利率
    schooseRate(index){
        if(index == 0){
            this.isLPR = true;
        }else{
            this.isLPR = false;
        }
        this.scurrRateIndex = index;
        this.showPicker3 = false;
        this.sfinalRate = this.srateList[index].key;
    },
    //  自定义利率
    sokRate(){    
        if(this.szdyRate){
            this.isLPR = false;
            this.sfinalRate = this.szdyRate;
            this.showPicker3 = false;
        }else{
            Toast('请填写利率');
        }
        
    },
       // 公 选择利率
    gchooseRate(index){
        if(index == 0){
            this.isLPR = true;
        }else{
            this.isLPR = false;
        }
        this.gcurrRateIndex = index;
        this.showPicker4 = false;
        this.gfinalRate = this.grateList[index].key;
    },
    //  自定义利率
    gokRate(){       
        if(this.gzdyRate){
            this.isLPR = false;
            this.gfinalRate = this.gzdyRate;
            this.showPicker4 = false;
        }else{
            Toast('请填写利率');
        }
        
    },
     caculateLoan() {
         this.showResult = true;
     }
  },
};
</script>
<style lang="scss" scoped>
.wrap-1{
    align-items: center;
    font-family: PingFangSC-Regular;
    .count-item{
        width: 87.5vw;
        height: 5.5vh;
        background: #FFFFFF;
        border-radius: 8px;
        margin-top: 2.5vh;
    }
    .btn{
        text-align: center;
        line-height: 5.5vh;
        color: #fff;
        background-color: #4687f2;
    }
.bottom{
    font-size: 15px;
    color: #A6A6A6;
    letter-spacing: 0;
    text-align: center;
    margin-top: 30px;
    }
    .bottom .line{
        margin: 0 15px;
    }
}
.custom-area{
        width: 100%;
        font-size: 15px;
        overflow: hidden;
        padding: 2vh 20px 8px 0;
        justify-content: space-between;
        .zdy{
            margin-left: 6vw;
        }
        .ipt-text{
            width: 25vw;
        }
        .btn{
            width: 15vw;
            height: 4vh;
            line-height: 4vh;
            border: none;
            font-size: 14px;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            background-color: #4687f2;     
        }
    }
    .choose-rate{
        .tips{
            font-size: 12px;
            color: #83868f;
            line-height: 5vh;
            background: #fafafa;
            padding: 0 6vw;
            background-color: #eee;
        }
        ul li{
            padding: 0 6vw;
            line-height: 8vh;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        li.on:after {
            content: '';
            position: absolute;
            width: 6vw;
            height: 3vh;
            right: 3vw;
            top: 50%;
            margin-top: -1.5vh;
            background: url(../assets/ok.png) no-repeat;
            background-size: 17px auto;
            }
    }
.bottom-tips{
    font-size: 16px;
    color: #4687f2;
    text-decoration: underline;
    margin-top: 2.5vh;
    width: 87.5vw;
    text-align: center;
}
/deep/ .van-cell{
    background-color:transparent;
}
/deep/ .van-field__label{
    width: 8.2rem;
}
</style>